<template>
    <div class="cesium-container" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import * as Cesium from 'cesium'
import "cesium/Build/Cesium/Widgets/widgets.css"

// 获取容器引用
const cesiumContainer = ref(null)
// 声明 viewer 变量
let viewer = null

onMounted(() => {
    // 初始化 Cesium 地图
    initCesium()
})

// 初始化 Cesium 函数
const initCesium = async () => {
    // 配置 Cesium 访问令牌（如果有）
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYzg5ODcwYy01NTUwLTQwNmMtODJmYy1iNmNmMzM5NDc3MDkiLCJpZCI6MzM4MTcyLCJpYXQiOjE3NTY5NTc1NTh9.-EbkLiNREwOVuCAMd2G_GTdWxcu-3cyeqylMd0QQgcg';

    // 初始化地图视图
    viewer = new Cesium.Viewer(cesiumContainer.value, {
        // 隐藏一些默认控件
        animation: false, // 动画控件
        timeline: false,  // 时间线控件
        fullscreenButton: true, // 全屏按钮
        geocoder: false,  // 地理编码控件
        homeButton: true, // 主页按钮
        infoBox: true,    // 信息框
        sceneModePicker: true, // 场景模式选择器
        selectionIndicator: true, // 选择指示器
        navigationHelpButton: false, // 导航帮助按钮
        baseLayerPicker: true, // 基础图层选择器

        // 配置地形
        terrainProvider: await Cesium.createWorldTerrainAsync({
            requestWaterMask: true,
            requestVertexNormals: true,
        }),

    })

    // 调整相机位置，默认看向中国区域
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
            104.06, 30.67, 15000000 // 经度、纬度、高度
        )
    })

    // 隐藏 Cesium 徽标
    viewer.cesiumWidget.creditContainer.style.display = "none"
}

// 组件卸载时销毁地图实例
onUnmounted = () => {
    if (viewer) {
        viewer.destroy()
    }
}
</script>

<style scoped>
.cesium-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
</style>
